<template>
  <div>
    <div id="check">
      <div v-for="(page, i) in pages" :id="createId('page_',i)" :key="i">
        <div class="check-container">
          <div class="watermark"><img class="watermark-img" src="@/assets/img/watermark.jpg" /></div>
          <div class="content">
            <div style="height: 50px"></div>
            <div class="check-box">
              <div class="page-header1">
                <table border="1">
                  <tr>
                  	<td class="w-450 h-100">
                      <el-row>
                        <el-col :span="10" :offset="2">
                          <img src="@/assets/img/logoNew.png" style="height: 70px" />
                        </el-col>
                        <el-col :span="11" :offset="1">
                          <b style="font-size: 35px;line-height: 2;">成都倍特</b>
                        </el-col>
                      </el-row>
                    </td>
                    <td colspan="2" class="w-450 h-100 text-center">{{ page.envTitle }}</td>
                  </tr>
                  <tr>
                  	<td class="w-450 h-30"><div class="m-l-5">记录编号 No: {{ page.recordNum }}</div></td>
                    <td class="w-225 h-30"><div class="m-l-5">版本号 Version: {{ page.versionNum }}</div></td>
                    <td class="w-225 h-30"><div class="m-l-5">页码 Page: {{ (i+1) + ' / ' + pages.length }}</div></td>
                  </tr>
                </table>
              </div>
              <div class="page-main" :id="createId('page_main_',i)">
                <div class="table-one-box">
                  <table border="1" :id="createId('page_main_table_',i)">
                    <tr>
                    	<td :colspan="page.envGetObjectName == '浮游菌' ? 7 : 6" class="h-35">
                        <div class="m-l-5">
                          培养皿批号：{{ page.cultureMediumBatchs }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" class="w-450 h-35">
                        <div class="m-l-5">
                          培养温度：&nbsp;&nbsp;℃
                        </div>
                      </td>
                      <td :colspan="page.envGetObjectName == '浮游菌' ? 4 : 3" class="w-450 h-35">
                        <div class="m-l-5">
                          培养时间：
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" class="w-450 h-35">
                        <div class="m-l-5">
                          产品品规：<span v-html="page.productNameSpecs"></span>
                        </div>
                      </td>
                      <td :colspan="page.envGetObjectName == '浮游菌' ? 4 : 3" class="w-450 h-35">
                        <div class="m-l-5">
                          产品批号：{{ page.productBatchs }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" class="w-450 h-35">
                        <div class="m-l-5">
                          操 作 人：
                        </div>
                      </td>
                      <td :colspan="page.envGetObjectName == '浮游菌' ? 4 : 3" class="w-450 h-35">
                        <div class="m-l-5">
                          复 核 人：
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" class="w-450 h-35">
                        <div class="m-l-5">
                          试验日期：{{ page.testTime | changeTime }}
                        </div>
                      </td>
                      <td :colspan="page.envGetObjectName == '浮游菌' ? 4 : 3" class="w-450 h-35">
                        <div class="m-l-5">
                          报告日期：
                        </div>
                      </td>
                    </tr>
                    <tr v-if="page.showAp">
                      <td colspan="3" class="w-450 h-35">
                        <div class="m-l-5">
                          仪器型号：{{ page.apparatusModel }}
                        </div>
                      </td>
                      <td :colspan="page.envGetObjectName == '浮游菌' ? 4 : 3" class="w-450 h-35">
                        <div class="m-l-5">
                          仪器编号：{{ page.apparatusNumber }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                    	<td :colspan="page.envGetObjectName == '浮游菌' ? 7 : 6" class="h-35">
                        <div class="m-l-5">
                          备注：{{ page.remark }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <template v-if="page.envGetObjectName == '个人卫生'">
                        <td :colspan="2" class="w-350 h-70 text-center">被测试人</td>
                        <td class="w-100 h-70 text-center">洁净级别</td>
                      </template>
                      <template v-else>
                        <td class="w-250 h-70 text-center">房间名称</td>
                        <td class="w-100 h-70 text-center">房间编号</td>
                        <td class="w-100 h-70 text-center">洁净级别</td>
                      </template>
                      <template v-if="page.envGetObjectName == '浮游菌'">
                        <td class="w-90 h-70 text-center">取样位置</td>
                        <td class="w-120 h-70 text-center">
                          菌落数</br>
                          （CFU/皿）
                        </td>
                        <td class="w-120 h-70 text-center">
                          结果</br>
                          （CFU/m³）
                        </td>
                        <td class="w-120 h-70 text-center">
                          结论</br>
                          符合规定
                        </td>
                      </template>
                      <template v-else>
                        <td class="w-150 h-70 text-center">{{ page.envGetObjectName != '个人卫生' ? '取样位置' : '测试项目' }}</td>
                        <td class="w-150 h-70 text-center">
                          菌落数</br>
                          （CFU/皿）
                        </td>
                        <td class="w-150 h-70 text-center">
                          结论</br>
                          符合规定
                        </td>
                      </template>
                    </tr>

                    <tr v-for="(item, j) in page.envItems" :key="j">
                      <td style="display: none;">{{ item.envItemId }}</td>
                      <template v-if="page.envGetObjectName == '个人卫生'">
                        <td v-if="item.noMerged" :rowspan="item.rowspan" :colspan="2" class="h-35 text-center">{{ item.testee }}</td>
                        <td v-if="item.noMerged" :rowspan="item.rowspan" class="h-35 text-center">{{ item.envGetLevelName }}</td>
                      </template>
                      <template v-else>
                        <td v-if="item.noMerged" :rowspan="item.rowspan" class="h-35 text-center">{{ item.roomName }}</td>
                        <td v-if="item.noMerged" :rowspan="item.rowspan" class="h-35 text-center">{{ item.roomNum }}</td>
                        <td v-if="item.noMerged" :rowspan="item.rowspan" class="h-35 text-center">{{ item.envGetLevelName }}</td>
                      </template>
                      <td class="h-35 text-center">{{ item.getName }}</td>
                      <td class="h-35"></td>
                      <td v-if="page.envGetObjectName == '浮游菌'" class="h-35"></td>
                      <td class="h-35">
                        <div class="m-l-5">
                          <div class="select-box m-l-5"></div>是
                          <div :class="[page.envGetObjectName == '浮游菌' ? 'm-l-15' : 'm-l-45', 'select-box']"></div>否
                        </div>
                      </td>
                    </tr>
                    <tr>
                    	<td :colspan="page.envGetObjectName == '浮游菌' ? 7 : 6" class="h-35">
                        <div class="m-l-5">
                          阴性对照：
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <div class="table-two-box">
                  <div>接受标准：每一测试点的菌落数符合下表的规定。</div>
                  <table border="1" v-if="page.envGetObjectName != '浮游菌'">
                    <tr>
                      <td rowspan="2" class="w-300 h-35 text-center">洁净级别</td>
                      <td colspan="2" class="w-600 h-35 text-center">{{ page.envGetObjectName + '最大允许数(CFU/皿)' }}</td>
                    </tr>
                    <tr>
                      <td class="w-300 h-35 text-center">警戒限</td>
                      <td class="w-300 h-35 text-center">标准限</td>
                    </tr>
                    <tr v-for="(level, k) in page.levels" :key="k">
                      <template v-if="page.envItems.findIndex(eit => eit.envGetLevelId == level.envGetLevelId) > -1">
                        <td class="w-300 h-35 text-center">{{ level.envGetLevelName }}</td>
                        <td class="w-300 h-35 text-center">{{ level.envGetLevelWarning }}</td>
                        <td class="w-300 h-35 text-center">{{ level.envGetLevelStandard }}</td>
                      </template>
                    </tr>
                  </table>

                  <table border="1" v-else>
                    <tr>
                      <td rowspan="2" class="w-225 h-35 text-center">洁净级别</td>
                      <td colspan="2" class="w-225 h-35 text-center">浮游菌最大允许数(CFU/m³)</td>
                      <td rowspan="2" class="w-225 h-35 text-center">结果计算</td>
                    </tr>
                    <tr>
                      <td class="w-225 h-35 text-center">警戒限</td>
                      <td class="w-225 h-35 text-center">标准限</td>
                    </tr>
                    <tr v-for="(level, k) in page.levels" :key="k">
                      <template v-if="page.envItems.findIndex(eit => eit.envGetLevelId == level.envGetLevelId) > -1">
                        <td class="w-225 h-35 text-center">{{ level.envGetLevelName }}</td>
                        <td class="w-225 h-35 text-center">{{ level.envGetLevelWarning }}</td>
                        <td class="w-225 h-35 text-center">{{ level.envGetLevelStandard }}</td>
                        <td class="w-225 h-35 text-center"><span v-html="level.resultRemark"></span></td>
                      </template>
                    </tr>
                  </table>

                  <el-row style="margin-top: 5px">
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="6">偏差清单：</el-col>
                        <el-col :span="18">
                          <div class="text-input-line"></div>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :offset="2" :span="10">
                      <div>
                        确认结论：
                        <div class="select-box"></div>符合规定
                        <div class="select-box m-l-20"></div>不符合规定
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="page-foot text-center">
                <div style="font-family: arial">
                  This document is strictly confidential.Any use and copy unauthorized by CHENGDU BRILLIANT PHARMACEUTICAL <b><i>is forbidden.</i></b>
                </div>
                <div>
                  本文件仅限成都倍特药业股份有限公司内部使用，严禁任何无授权使用、泄露或复印，违者必究。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { isBlank,parseTime } from '@/common/js/utils'
  import { CODE_OK } from '@/common/js/config'
  import Calc from 'calculatorjs'
  import { getEnvInfo } from "@/api/env"
  export default {
    data() {
      return{
        pages: []
      }
    },
    props: ["childDataForm"],
    created() {
      if (!isBlank(this.childDataForm)) {
        this.getInfo()
      }
    },
    methods: {
      getInfo() {
        const params = {
          envMergeId: this.childDataForm.envMergeId
        }
        getEnvInfo(params).then(res => {
          if (res.code === CODE_OK) {
            res.envObjects.forEach(item => this.pages.push(...JSON.parse(JSON.stringify(item.envLists))))
            this.pages = this.pages.map(p => {
              //只有浮游菌才显示仪器
              this.$set(p,'showAp',p.envGetObjectName == '浮游菌')
              p.envItems = p.envItems.map(it => {
                this.$set(it,'noMerged',true)
                this.$set(it,'rowspan',1)
                return it
              })
              return p
            })
            this.$nextTick(() => {
              this.paint(0)
            })
          }else{
            this.$message.error(res.msg)
          }
        })
      },
      paint(index) {
        //page-header1 + page_main + page_main.margin-top(35px) + page_foot = max(1400px)
        //130px + max(1195px) + 40px = 1365px
        let pageId = this.createId('page_main_',index)
        if (document.getElementById(pageId) == null) {
          this.mergeItem()
          return
        }
        if(this.getHeightById(pageId) > 1180) {
          //如果超过最大高度，那么一个一个减少envItems
          let table = document.getElementById(this.createId('page_main_table_',index))
          let childs = table.childNodes
          while(this.getHeightById(pageId) > 1180){
            table.removeChild(childs[childs.length - 3])
          }
          this.$nextTick(() => {
            //并把显示的已经移除的item在实际data中移除并赋给新page
            let lastId = parseInt(table.childNodes[table.childNodes.length - 3].firstChild.innerHTML)
            let data = this.pages[index]
            let sIndex = null
            for (let x=0,y=data.envItems.length; x<y; x++) {
              if (lastId == data.envItems[x].envItemId) {
                sIndex = x + 1
                break
              }
            }
            let subItems = data.envItems.splice(sIndex)
            let newPage = JSON.parse(JSON.stringify(this.pages[index]))
            newPage.envItems = subItems
            this.pages.splice(index+1,0,newPage)
            this.$nextTick(() => {
              this.paint(index + 1)
            })
          })
        }else{
          this.$nextTick(() => {
            this.paint(index + 1)
          })
        }
      },
      mergeItem() {
        for (let i=0,j=this.pages.length; i<j; i++) {
          let page = this.pages[i]
          let items = page.envItems
          //大于一行才合并
          if (items.length > 1) {
            for (let x=1,y=items.length; x<y; x++) {
              let eqLastrow = page.envGetObjectName == '个人卫生' ?
              (items[x].testee == items[x-1].testee
              && items[x].envGetLevelId == items[x-1].envGetLevelId)
                : (items[x].roomName == items[x-1].roomName
                  && items[x].roomNum == items[x-1].roomNum
                  && items[x].envGetLevelId == items[x-1].envGetLevelId)
              //如果和上一行数据相同
              if (eqLastrow) {
                //如果上一行已经被合并
                if (!items[x-1].noMerged) {
                  //开始合并行修改
                  items[items[x-1].mainIndex].rowspan ++
                  //当前行修改
                  items[x].noMerged = false
                  items[x].mainIndex = items[x-1].mainIndex
                }else{
                  //如果是第二行
                  //上一行修改
                  items[x-1].noMerged = true
                  items[x-1].rowspan ++
                  //当前行修改,并记录开始合并行的index
                  items[x].noMerged = false
                  items[x].mainIndex = x-1
                }
              }
            }
          }
        }
      },
      getHeightById(id) {
        return parseInt(window.getComputedStyle(document.getElementById(id)).getPropertyValue('height'))
      },
      createId(pre,i) {
        return pre + i
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .check-container{
    color: black;
    background-color: #fff;
    font-family: SimSun;
    font-size: 20px;
    width: 960px;
    height: 1498px;
    padding: 15px;
    .watermark{
      position: absolute;
      margin-top: 250px;
      .watermark-img{
        width: 960px;
      }
    }
    .content{
      position: relative;
      .check-box{
        width: 900px;
        height: 1400px;
        margin: 0 15px;
        .page-header1{
          height: 130px;
        }
        .page-main{
          width: 100%;
          margin-top: 35px;
          .table-one-box{

          }
          .table-two-box{
            margin-top: 40px;
            .text-input-line{
              height: 28px;
              width: 100%;
              border-bottom: 1px solid black;
            }
          }
        }
        .page-foot{
          position: absolute;
          bottom: 10px;
          border-top: solid black 1.5px;
          font-size: 13px;
          width: 900px;
          height: 40px;
        }
      }
    }
    .m-l-5{
      margin-left: 5px;
    }
    .m-l-20{
      margin-left: 20px;
    }
    .m-l-15{
      margin-left: 15px;
    }
    .m-l-45{
      margin-left: 45px;
    }
    .w-450{
      width: 450px;
    }
    .w-225{
      width: 225px;
    }
    .w-300{
      width: 300px;
    }
    .w-600{
      width: 600px;
    }
    .h-100{
      height: 100px;
    }
    .h-30{
      height: 30px;
    }
    .w-150{
      width: 150px;
    }
    .w-100{
      width: 100px;
    }
    .w-90{
      width: 90px;
    }
    .w-120{
      width: 120px;
    }
    .w-250{
      width: 250px;
    }
    .w-350{
      width: 350px;
    }
    .h-35{
      height: 35px;
    }
    .h-70{
      height: 70px;
    }
    .select-box{
      display: inline-block;
      width: 15px;
      height: 15px;
      border: 1px solid black;
    }
  }
</style>
